<template>
  <TopNav title="移动健康监测"/>
  <div class="mobile-health-monitoring-page">


    <!-- 患者信息区域 -->
    <div class="patient-info-section">
      <h2 class="section-title">患者信息</h2>
      <el-form :model="patientForm">
        <el-form-item label="姓名">
          <el-input v-model="patientForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="patientForm.age"></el-input-number>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="patientForm.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>

    <!-- 营养摄入记录区域 -->
    <div class="nutrition-intake-section">
      <h2 class="section-title">今日营养摄入</h2>
      <el-form :model="intakeForm">
        <el-form-item label="早餐">
          <el-input v-model="intakeForm.breakfast"></el-input>
        </el-form-item>
        <el-form-item label="午餐">
          <el-input v-model="intakeForm.lunch"></el-input>
        </el-form-item>
        <el-form-item label="晚餐">
          <el-input v-model="intakeForm.dinner"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- 健康指标录入区域 -->
    <div class="health-indicators-section">
      <h2 class="section-title">健康指标</h2>
      <el-form :model="indicatorsForm">
        <el-form-item label="体重(kg)">
          <el-input-number v-model="indicatorsForm.weight"></el-input-number>
        </el-form-item>
        <el-form-item label="身高(cm)">
          <el-input-number v-model="indicatorsForm.height"></el-input-number>
        </el-form-item>
        <el-form-item label="血压(mmHg)">
          <el-input v-model="indicatorsForm.bloodPressure"></el-input>
        </el-form-item>
        <el-form-item label="血糖(mmol/L)">
          <el-input-number v-model="indicatorsForm.bloodSugar"></el-input-number>
        </el-form-item>
      </el-form>
    </div>

    <!-- 监测结果与建议区域 -->
    <div class="monitoring-result-section">
      <h2 class="section-title">监测结果与建议</h2>
      <p>营养状态评估：<span>{{ nutritionStatus }}</span></p>
      <p>健康风险提示：<span>{{ healthRisk }}</span></p>
      <el-button
          type="primary"
          @click="generateMonitoringResult"
          :disabled="!intakeForm.breakfast ||!intakeForm.lunch ||!intakeForm.dinner ||!indicatorsForm.weight ||!indicatorsForm.height ||!indicatorsForm.bloodPressure ||!indicatorsForm.bloodSugar"
      >生成监测结果</el-button>
    </div>

    <!-- 图表区域（可展示指标趋势等） -->
    <div class="chart-section">
      <h2 class="section-title">指标趋势</h2>
      <div id="chart-container" style="width: 100%; height: 300px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';
import TopNav from "@/components/TopNav/Back.vue"
// 患者信息表单数据
const patientForm = ref({
  name: '',
  age: 0,
  gender: ''
});

// 营养摄入表单数据
const intakeForm = ref({
  breakfast: '',
  lunch: '',
  dinner: ''
});

// 健康指标表单数据
const indicatorsForm = ref({
  weight: 0,
  height: 0,
  bloodPressure: '',
  bloodSugar: 0
});

// 营养状态
const nutritionStatus = ref('');
// 健康风险提示
const healthRisk = ref('');

// 生成监测结果
const generateMonitoringResult = () => {
  // 简单的营养状态评估逻辑
  if (intakeForm.value.breakfast.includes('蔬菜') && intakeForm.value.lunch.includes('蛋白质') && intakeForm.value.dinner.includes('粗粮')) {
    nutritionStatus.value = '营养均衡';
  } else {
    nutritionStatus.value = '营养不均衡，需调整饮食结构';
  }

  // 简单的健康风险评估逻辑
  const bmi = indicatorsForm.value.weight / ((indicatorsForm.value.height / 100) ** 2);
  if (indicatorsForm.value.bloodPressure > 140 / 90 && bmi > 25 && indicatorsForm.value.bloodSugar > 7) {
    healthRisk.value = '高血压、肥胖、高血糖风险，建议及时就医并调整生活方式';
  } else if (indicatorsForm.value.bloodPressure > 140 / 90 || bmi > 25 || indicatorsForm.value.bloodSugar > 7) {
    healthRisk.value = '存在单项健康风险指标异常，需关注并改善相应方面';
  } else {
    healthRisk.value = '暂无明显健康风险，继续保持健康生活方式';
  }

  // 更新图表数据（简单示例，可根据实际需求完善）
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['体重', '身高', '血压', '血糖'];
  const yAxisData = [
    indicatorsForm.value.weight,
    indicatorsForm.value.height,
    parseFloat(indicatorsForm.value.bloodPressure.split('/')[0]),
    indicatorsForm.value.bloodSugar
  ];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '指标数值',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
};

// 页面加载时初始化图表
onMounted(() => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['体重', '身高', '血压', '血糖'];
  const yAxisData = [0, 0, 0, 0];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '指标数值',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
});
</script>

<style scoped>
.mobile-health-monitoring-page {
  padding: 20px;
  background-color: #f4f4f5;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.page-header {
  text-align: center;
  margin-bottom: 20px;
}
.header-title {
  color: #303133;
  font-size: 28px;
}
.patient-info-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.section-title {
  color: #303133;
  margin-bottom: 10px;
}
.nutrition-intake-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.health-indicators-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.monitoring-result-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.chart-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
</style>
